import React ,{useEffect}from 'react'
import { Tabs } from 'antd';
import {useDispatch,useSelector} from "react-redux"
import * as api from "../../../api/index"
import ListChildren from '../../../components/ListChildren';
const { TabPane } = Tabs;
function My_application() {
    const dispatch = useDispatch()

    useEffect(()=>{
        dispatch(api.get_list())
    },[dispatch])

    const list = useSelector((state) =>{
        return state.reducer.list
    })
    const listChildren = useSelector((state) =>{
        return state.reducer.listChildren
    })

    function callback(key) {
        console.log(key);
        dispatch(api.set_listChildren(key))
    }

    return (
        <div>
            <Tabs defaultActiveKey="1" onChange={callback}>
                {
                    list&&list.map((item,index)=>{
                        return    <TabPane tab={item.title} key={index}>
                            <ListChildren  listChildren= {listChildren}/>
                        </TabPane>
                    })
                }
            </Tabs>
        </div>
    )
}

export default My_application
